<template>
  <div class="page_padding">
    <MyNavBar @goback="goback" title="任务状态设置" />
    <van-form @submit="onSubmit" label-width="2.6rem" :show-error="false">
      <van-field v-for="item in formData.infoVOS" :key="item.obj">
        <template #label>
          <div class="label">{{ item.objName }}：</div>
          <span class="status-name">（{{ item.stateName || '' }}）</span>
        </template>
        <template #input>
          <van-radio-group v-model="item.newState" direction="horizontal" @change="onChangeRadio">
            <van-radio checked-color="#136cc9" :disabled="!item.isDisable" name="TASK_STATUS_3">已完成</van-radio>
            <van-radio checked-color="#136cc9" v-if="item.obj === 'ALL'" name="TASK_STATUS_7">已终止</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div class="btn-group">
        <van-button round block color="#004db6" native-type="submit">保 存</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { listAllTaskState, updateTaskState } from '@api/api-task.js'

export default {
  name: 'SetTaskStatus',
  data() {
    return {
      id: this.$route.query.id,
      formData: {
        infoVOS: [],
      },
    }
  },
  mounted() {
    this.formData.taskId = this.id
    this.initdata()
  },
  methods: {
    async initdata() {
      const { data = [] } = await listAllTaskState({ taskId: this.id })
      this.formData.infoVOS = [
        ...data.map(item => {
          if (item.state === 'TASK_STATUS_3') {
            item.newState = item.state
          } else {
            item.newState = null
          }
          return item
        }),
      ]
    },
    /* 提交数据 */
    onSubmit() {
      updateTaskState([...this.formData.infoVOS]).then(res => {
        if (res.code === 0) {
          this.$toast.success(res.msg)
        }
        this.goback()
      })
    },
    /* 监听切换 */
    onChangeRadio(e) {
      // 如果总任务状态设置为已终止，则其他单位的任务状态还原
      if (e === 'TASK_STATUS_7') {
        this.formData.infoVOS.forEach(item => {
          if (item.obj !== 'ALL') {
            item.newState = ''
          }
        })
      } else {
        // 所有单位的任务状态都设置为已完成，则总任务的状态也设置为已完成
        const { infoVOS } = this.formData
        const chooseData = infoVOS.filter(item => item.obj !== 'ALL' && item.newState === 'TASK_STATUS_3')
        if (chooseData.length + 1 === infoVOS.length) {
          this.formData.infoVOS.forEach(item => {
            if (item.obj === 'ALL') {
              item.newState = 'TASK_STATUS_3'
            }
          })
        }
      }
    },
    /* 返回上一页 */
    goback() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="scss" scoped>
.page_padding {
  background: #f7f7f7;
}
.label {
  text-align: center;
}
.status-name {
  color: #136cc9;
}
/deep/.van-radio--horizontal {
  margin-right: 12px;
}
/deep/.check-all {
  margin-bottom: 18px;
  font-size: $fontSize32;
}
/deep/.van-cell {
  padding: 10px 16px;
}
.btn-group {
  margin: px2rem(30);
}
</style>
